<template>
  <div>
    <div class="wy-filter">
      <el-input v-model="query.value" size="small" placeholder="请输入姓名"></el-input>
      <el-button type="success" size="small" plain icon="el-icon-search" @click="find">查询</el-button>
      <el-button style="float:right" type="primary" size="small" plain icon="el-icon-plus" @click="add"></el-button>
      <el-button style="float:right" type="primary" size="small" plain icon="el-icon-download" @click="downExcel"></el-button>
    </div>
    <el-table :data="tableData.records">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <el-image
            style="width:80px;height:80px"
            fit="contain"
            :src="img(scope.row.icon)"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.active === 1">有效</span>
          <span v-else>无效</span>
        </template>
      </el-table-column>
      <el-table-column width="180px">
        <template slot-scope="scope">
			<template v-if="scope.row.active == 1">
          <el-button size="mini" plain icon="el-icon-edit" @click="update(scope.row.id)">修改</el-button>
          <el-button type="danger" size="mini" plain icon="el-icon-delete" @click="del(scope.row.id, 0)">删除</el-button>
		  </template>
		  <el-button v-else type="warning" size="mini" plain icon="el-icon-edit" @click="del(scope.row.id, 1)">还原</el-button>
		  
		  
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;"
      background
      :current-page.sync="query.pageNo"
      :page-count="tableData.pages"
      layout="prev,pager,next"
      @current-change="getTableData"></el-pagination>
      <el-dialog
        width="500px"
        :title="editDialog.title"
        :visible.sync="editDialog.show"
        :close-on-click-modal="false">
        <component
          v-if="editDialog.show"
          :is="editDialog.component"
          :id="editDialog.id"
          :show.sync="editDialog.show"
          :module="editDialog.module"
          @getTableData="getTableData"
        ></component>
      </el-dialog>
  </div>
</template>

<script>
import { get, post } from '@/plugins/axios'
import qee from "qf-export-excel"
export default {
  name: 'UserIndex',
  created () {
    this.getTableData()
  },
  data () {
    const module = '/ums-user'
    return {
      url: {
        list: module + '/list',
        del: module + '/del'
      },
      query: {
        value: '',
        pageNo: 1,
        pageSize: 8
      },
      tableData: {},
      editDialog: {
        show: false,
        title: '编辑学生信息',
        component: () => import('./edit'),
        id: null,
        module: module
      }
    }
  },
  methods: {
    getTableData () {
      get(this.url.list, this.query, response => {
        this.tableData = response
      })
    },
    find () {
      this.query.pageNo = 1
      this.getTableData()
    },
    add () {
      this.editDialog.id = null
      this.editDialog.show = true
    },
    update (id) {
      this.editDialog.id = id
      this.editDialog.show = true
    },
    del (id, active) {
	  const text = active == 0 ?'此操作将删除该数据, 是否继续?':'确定恢复该数据吗?';
	  const title = active == 0 ?'删除操作':'还原操作?';
      this.$confirm(text, title, {
        type: 'warning'
      }).then(() => {
        post(this.url.del, { id: id, active: active }, response => {
          this.getTableData()
        })
      })
    },
	downExcel(){
		const titleList = [
			{ title:'编号',key:'id'},
			{ title:'姓名',key:'name'},
			{ title:'手机',key:'phone'},
			{ title:'邮箱',key:'email'},
		]
		qee(titleList,this.tableData.records,'users')
	}
  }
}
</script>

<style>

</style>
